<template>
  <div class="doubleCho">
    <div class="modelTitle">基本信息</div>
    <el-form ref="cmpForm" label-width="150px" label-position="left" style="padding-left: 40px; width: 80%;">
      <el-form-item label="双选会名称" prop="name">
        <el-input v-model="doubleChoParams.name" placeholder="请输入少于30个中文" :maxlength="30" clearable style="width: 50%" />
      </el-form-item>
      <el-form-item label="双选会海报" prop="images">
        <UploadAvatar v-model="doubleChoParams.images[0]" tipmsg="选填，请上传600 * 400px的jpg.png格式的图片" />
      </el-form-item>
      <el-form-item label="报名起止时间">
        <el-date-picker
          v-model="apply_at_area"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="请输入开始时间"
          end-placeholder="请输入结束时间"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="会议起止时间">
        <el-date-picker
          v-model="meeting_at_area"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="请输入开始时间"
          end-placeholder="请输入结束时间"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="公司地址" prop="address">
        <el-cascader
          ref="myCascader"
          v-model="cityArea"
          placeholder="请选择省市区"
          :options="areaList"
          :props="defaultProps"
          style="margin-bottom: 30px; width: 400px;"
          clearable
          @change="handleCascaderChange"
        />
        <br>
        <el-input v-model="doubleChoParams.address" placeholder="请输入公司地址，少于50个中文" :maxlength="50" style="width: 50%" clearable />
      </el-form-item>
      <el-form-item label="招聘会联系人">
        <el-input v-model="doubleChoParams.contact_name" placeholder="请输入招聘会联系人（少于5个中文）" :maxlength="5" style="width: 50%" clearable />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="doubleChoParams.contact_phone" placeholder="请输入招聘会联系人（少于30个数字和字符）" :maxlength="30" style="width: 50%" clearable />
      </el-form-item>
      <el-form-item label="联系邮箱">
        <el-input v-model="doubleChoParams.contact_email" placeholder="请输入有效邮箱格式" :maxlength="30" style="width: 50%" clearable />
      </el-form-item>
      <el-form-item label="招聘会说明">
        <Tinymce ref="editor" v-model="doubleChoParams.description" style="width: 80%" :height="50" />
      </el-form-item>
      <!-- 缺少一个文件上传 -->
      <el-form-item style="margin-top: 60px;">
        <el-button type="primary" :loading="comfirmLoading" @click="addNewDoubleCho">确认</el-button>
        <el-button @click="goBackList">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAreas, addNewDC } from '../../api/doubleChoose'
import Tinymce from '@/new_components/Tinymce'
export default {
  components: {
    UploadAvatar: () => import('../informationNetwork/Upload'),
    Tinymce
  },
  data() {
    return {
      defaultProps: {
        label: 'label',
        value: 'label'
      },
      areaList: [], // 省市区列表
      cityArea: null,
      apply_at_area: null, // 报名起止时间
      meeting_at_area: null, // 报名起止时间
      doubleChoParams: {
        name: null,
        images: [],
        apply_start_at: null,
        apply_end_at: null,
        meeting_start_at: null,
        meeting_end_at: null,
        province: null, // 省
        city: null, // 市
        district: null, // 区
        address: null,
        contact_name: null,
        contact_phone: null,
        contact_email: null,
        description: null,
        lat: '1111111', // 经度
        lng: '2222222' // 纬度
      },
      comfirmLoading: false // 按钮可点击状态
    }
  },
  mounted() {
    this.getAreaList()
  },
  methods: {
    goBackList() {
      this.$router.push({ path: './list' })
    },
    // 获取省市区
    getAreaList() {
      getAreas().then(res => {
        this.areaList = res
      })
    },
    handleCascaderChange(value) {
      if (value) {
        this.doubleChoParams.province = value[0]
        this.doubleChoParams.city = value[1]
        this.doubleChoParams.district = value[2]
      }
    },
    addNewDoubleCho() {
      if (!this.apply_at_area) {
        this.$message({
          type: 'error',
          message: '请选择报名起止时间'
        })
      } else if (!this.meeting_at_area) {
        this.$message({
          type: 'error',
          message: '请选择会议起止时间'
        })
      } else {
        this.doubleChoParams.apply_start_at = this.apply_at_area[0]
        this.doubleChoParams.apply_end_at = this.apply_at_area[1]
        this.doubleChoParams.meeting_start_at = this.meeting_at_area[0]
        this.doubleChoParams.meeting_end_at = this.meeting_at_area[1]

        const applyEndAt = (new Date(this.doubleChoParams.apply_end_at)).getTime()
        const meetingStartAt = (new Date(this.doubleChoParams.meeting_start_at)).getTime()

        if (applyEndAt < meetingStartAt) {
          if (this.doubleChoParams.province !== this.doubleChoParams.city) {
            this.doubleChoParams.full_address = this.doubleChoParams.province + '省' + this.doubleChoParams.city + '市' + this.doubleChoParams.district + this.doubleChoParams.address
          } else {
            this.doubleChoParams.full_address = this.doubleChoParams.city + '市' + this.doubleChoParams.district + this.doubleChoParams.address
          }
          this.comfirmLoading = true
          addNewDC(this.doubleChoParams).then(() => {
            this.$message({
              type: 'success',
              message: '新增双选会信息成功！'
            })
            this.$router.push({ path: './list' })
          }).finally(() => {
            this.comfirmLoading = false
          })
        } else {
          this.$message({
            type: 'error',
            message: '请选择合理的会议起始时间'
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .doubleCho {
    padding: 30px;
    .modelTitle {
      color: #222;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }
    .licenseImg {
      width: 240px;
      height: 360px;
    }
  }
  .el-button:focus, .el-button:hover {
    color: #0C66FF;
    border-color: #0C66FF;
    background-color: #fff;
  }
  .el-button--primary {
    color: #FFF;
    background-color: #0C66FF;
    border-color: #0C66FF;
  }
  .el-button--small {
    border-radius: 8px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #0951CC;
    border-color: #0951CC;
  }
</style>
